import React from 'react'
import { NavBar, List, InputItem, Grid } from 'antd-mobile'
import { connect } from 'react-redux'
import { getChatMsgList, SendMsg, setRead } from '../../redux/chat.redux'
import './chat.css'
import store from '../../redux/store'
@connect(
    state => state,
    { getChatMsgList, SendMsg, setRead }
)
class Chat extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            msg: "",
            msgList: [],
            listView: "",
            emjoyList: [],
            isShowEmjoy: false
        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.setScrollTop = this.setScrollTop.bind(this);
        
    }
    handleSubmit() {
        console.log("我发送消息")
        let msg = { from: this.props.user._id, to: this.props.match.params.user, msg: this.state.msg };
        this.props.SendMsg(msg)
        this.setState({
            msg: ""
        })
        this.setScrollTop();
    }
    componentDidMount() {
        console.log(this.props);
        if (this.props.chatmsg.chatMsgList.length == 0) {
            this.props.getChatMsgList();
        }
        const emjoyStr = "😀 😁 😂 😃 😄 😅 😆 😉 😊 😋 😎 😍 😘 😗 😙 😚 😇 😐 😑 😶 😏 😣 " +
            "🙈 🙉 🙊 🐵 🐒 🐶 🐕 🐩 🐺 🐱 😺 😸 😹 😻 😼 😽 🙀 😿 😾 🐈 🐯 🐅 🐆 🐴 🐎 🐮 🐂 🐃 🐄 🐷 🐖 🐗 🐽 🐏 🐑 🐐" +
            " 🐪 🐫 🐘 🐭 🐁 🐀 🐹 🐰 🐇 🐻 🐨 🐼 🐾 🐔 🐓 🐣 🐤 🐥 🐦 " +
            "🐧 🐸 🐊 🐢 🐍 🐲 🐉 🐳 🐋 🐬 🐟 🐠 🐡 🐙 🐚 🐌 🐛 🐜 🐝 🐞 🦋";
        const emjoyList = emjoyStr.split(" ").filter(v => v != "").map(v => {
            return {
                text: v
            }
        })
        this.setState({
            emjoyList: emjoyList
        })
        // this.setScrollTop();
        // this.props.ReceveMsg();
    }
    componentWillUnmount() {
        this.props.setRead(this.props.match.params.user)
    }
    setScrollTop(timer = 100) {
        setTimeout(() => {
            document.getElementsByClassName("chatScrollView")[0].scrollTop = document.getElementsByClassName("chatScrollView")[0].scrollHeight;
        }, timer)
    }
    componentDidUpdate(){
        this.setScrollTop(300);
    }
    render() {
        console.log("渲染中")
        return (
            <div id="Chat">
                <NavBar
                    mode="dark"
                    leftContent="返回"
                    style={{
                        position: "fixed", top: "0px", left: "0px", width: "100%", zIndex: "9999"
                    }}
                    onLeftClick={
                        () => {
                            this.props.history.go(-1)
                        }
                    }
                >
                    {this.props.chatmsg.userlist[this.props.match.params.user] ? this.props.chatmsg.userlist[this.props.match.params.user].name : "用户"}
                </NavBar>
                <div className="chatContainer" onClick={()=>{
                    this.setState({
                        isShowEmjoy:false
                    })
                }}>
                    <div className='chatScrollView'>
                        {this.props.chatmsg.chatMsgList.map((item, index) => {
                            if (item.from == this.props.match.params.user &&
                                item.to == this.props.user._id) {
                                let avart = this.props.chatmsg.userlist[this.props.match.params.user] ? require("../img/" + this.props.chatmsg.userlist[this.props.match.params.user].avatar + ".png") :
                                    "http://pic.qqtn.com/up/2017-10/15088155309975249.jpg"
                                return (
                                    <div className="chatItem chatItem_user" key={index}>
                                        <img src={avart} />
                                        <p>{item.content}</p>
                                        <span style={{ flex: 1 }}></span>
                                    </div>
                                )
                            } else if (item.from == this.props.user._id &&
                                item.to == this.props.match.params.user) {
                                console.log(this.props.user.avatar)
                                let avart = this.props.user.avatar ? require("../img/" + this.props.user.avatar + ".png") :
                                    "http://pic.qqtn.com/up/2017-10/15088155309975249.jpg"
                                return (
                                    <div className="chatItem chatItem_myself" key={index}>
                                        <span style={{ flex: 1 }}></span>
                                        <p>{item.content}</p>
                                        <img src={avart} />
                                    </div>
                                )
                            } else {
                                return null
                            }
                        })}
                    </div>
                </div>
                <InputItem
                    className="charInput"
                    type="text"
                    value={this.state.msg}
                    placeholder="请输入内容"
                    onErrorClick={this.onErrorClick}
                    onChange={(e) => this.setState({
                        msg: e
                    })}
                    onClick={() => {
                        document.getElementsByClassName("charInput")[0].scrollIntoView()
                    }}
                    onFocus={() => {
                        this.setState({
                            isShowEmjoy: false
                        })
                        this.setScrollTop(400)
                    }}
                    extra={
                        <div className="rightOptions">
                            <span onClick={() => {
                                this.setState({
                                    isShowEmjoy: !this.state.isShowEmjoy
                                }, () => {
                                    if (this.state.isShowEmjoy) {
                                        setTimeout(() => {
                                            window.dispatchEvent(new Event("resize"))
                                        }, 0)
                                        this.setScrollTop();
                                    }

                                })
                            }}>😀</span>
                            <span onClick={() => {
                                this.handleSubmit()
                            }}>发送</span></div>}></InputItem>
                {
                    this.state.isShowEmjoy ? <Grid data={this.state.emjoyList} isCarousel onClick={_el => this.setState({
                        msg: this.state.msg + _el.text
                    })}
                        columnNum={9} carouselMaxRow={4}
                    /> : null
                }

            </div>
        )
    }
}


export default Chat
